<template>
  <div v-loading="loading" class="app-main-content-box">
    <div v-if="loaded">
      <div v-if="!isOnline" class="err-tips">
        商户小程序未正式发布，暂时不可以获取二维码。
      </div>
      <div v-else class="wx-qrcode-container">
        <div v-if="qrCodeUrl" class="qr-code">
          <el-image :src="qrCodeUrl" />
        </div>
        <div v-if="maInfo.DEFAULT.auth" class="more-info">
          <div class="cell-item">
            <div>小程序原始ID：</div>
            <div>{{ maInfo.DEFAULT.auth.base.userName }}</div>
          </div>
          <div class="cell-item">
            <div>小程序APPID：</div>
            <div>{{ maInfo.DEFAULT.auth.base.appId }}</div>
          </div>
          <div class="cell-item">
            <div>小程序路径：</div>
            <div>sp-member/pages/couponDetailNew/main?receiveCode={{ couponBase.receiveCode }}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { receiveQrCode } from '../../../api/coupon'

export default {
  props: {
    couponBase: {
      require: true,
      type: Object
    }
  },
  data() {
    return {
      // 配置
      // 状态
      loaded: false,
      isOnline: true,
      loading: false,
      // 数据
      qrCodeUrl: null
    }
  },
  computed: {
    ...mapGetters(['maInfo'])
  },
  watch: {
    couponBase: {
      handler: function(val) {
        this.fetchData()
      },
      deep: true
    }
  },
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取二维码
    fetchData() {
      if (!this.$store.state.wechat.maInfo.DEFAULT.isOnline) {
        this.loaded = true
        this.isOnline = false
      } else {
        this.loading = true
        receiveQrCode({ couponId: this.couponBase.id }).then(res => {
          this.qrCodeUrl = res.data
        }).finally(() => {
          this.loaded = true
          this.loading = false
        })
      }
    }
    /**
     * 按钮组
     */
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.err-tips{
  margin:100px 0;
  font-size: 14px;
  color:#606266;
  text-align: center;
}
.wx-qrcode-container {
  display: flex;
  .qr-code {
    width: 220px;
    height: 220px;
    margin-right: 20px;
  }
  .more-info {
    display: flex;
    flex:1;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    .cell-item {
      display: flex;
      margin-bottom: 10px;
      div:first-child {
        flex: 0 0 120px;
        text-align: right;
      }
      div:last-child {
        flex:1;
        color:#606266;
        word-break: break-all;
      }
    }
  }
}
</style>
